<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Event Delegation in jQuery - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
   </head>
   <body>
      <ul id="my-list">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
         <li>Item 5</li>
      </ul>

      <script src="../js/jquery-1.11.3.min.js"></script>
      <script>
         $('#my-list').on('mouseover', 'li', function(event) {
            console.log('List item: ' + ($(this).index() + 1));
         });
      </script>
   </body>
</html>